<template>
	<view class="content">
		<view class="pageHeader">
			退款详情
			<navigator class="generalBack" url="index" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</navigator>
		</view>
		<!-- 通过type和status判断展示的内容 --><!--0待确认 1待退货 2待审核(退货退款) 3已完成 4已拒绝 5已取消-->
		<view class="regoodbox">
			<view style="display: flex;justify-content: flex-end;position: relative;padding: 34upx 80upx 34upx 0;background-color: #fff;">
				<view style="position: absolute;top:30upx;left: 54upx;color: #333;font-size: 28upx;">
					<text v-if="fundOrder.status==2">等待商家处理</text>
					<text v-if="fundOrder.status==0">等待商家确认退货退款信息</text>
					<text v-if="fundOrder.status==1&&fundOrder.type==1">请退货并填写物流信息</text>
					<text v-if="fundOrder.status==2&&fundOrder.type==1">等待商家审核退货信息</text>
					<text v-if="fundOrder.status==3">退款成功</text>
					<text v-if="fundOrder.status==4||fundOrder.status==5">{{fundOrder.status_text}}</text>
					<view v-if="fundOrder.status==3||fundOrder.status==4||fundOrder.status==5" style="color: #666;font-size: 24upx;">{{fundOrder.upd_time_time}}</view>
				</view>
				<image src="../../static/t-1.png" class="fund-1" v-if="fundOrder.status==0"></image>
				<image src="../../static/t-2.png" class="fund-2" v-if="fundOrder.status==1||fundOrder.status==2"></image>
				<image src="../../static/t-3.png" class="fund-3" v-if="fundOrder.status==3||fundOrder.status==4||fundOrder.status==5"></image>
			</view>
			<view style="margin: 20upx 0;background-color: #fff;font-size: 28upx;color: #333;padding: 30upx;" v-if="fundOrder.status!=='5'&&fundOrder.status!=='2'"> 
				<!-- 这是待审核 -->
				<view style="display: flex;justify-content: space-between;" v-if="fundOrder.status==3">
					退款总金额
					<view>共计：<text style="color: #EC6104;">￥{{fundOrder.price}}</text></view>
				</view>
				<view style="border-bottom: 2upx solid #eee;padding-bottom: 20upx;" v-if="fundOrder.status==0">
					<view>您已成功发起退款申请，请耐心等待商家处理</view>
					<view style="font-size: 26upx;color: #666;margin-top:16upx;">
						<view style="display: flex;align-items: center;">
							<view class="circle"></view>
							<view class="tips">商家同意后,请按照给出的退货地址退货,并请记录退货 运单号</view>
						</view>
						<view style="display: flex;align-items: center;">
							<view class="circle"></view>
							<view class="tips">如商家拒绝,您可以修改申请后再次发起,商家会重新处理</view>
						</view>
					</view>
				</view>
			
				<!-- 这是退货退款 未填写信息-->
				<view style="border-bottom: 2upx solid #eee;padding-bottom: 20upx;" v-if="fundOrder.status!=='0'&&fundOrder.type==1&&fundOrder.status!=='2'">
					<view v-if="fundOrder.status!=='2'" style="border-bottom: 2upx solid #eee;margin-bottom: 16upx;">商家已同意退货申请，请尽快发货</view>
					<view style="display: flex;align-items: center;padding: 20upx;">
						<image src="../../static/t-4.png" style="width: 34upx;height: 34upx;"></image>
						<view style="margin-left: 26upx;font-size: 24upx;color: #666;">
							<view>收货人：{{fundAddress.company_name}} {{fundAddress.mobile}}</view>
							<view style="margin-top:8upx;">{{fundAddress.province}}{{fundAddress.city}}{{fundAddress.county}}{{fundAddress.address}}</view>
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<view class="circle"></view>
						<view class="tips" style="color: #666;font-size: 26upx;">请填写真实物流信息，逾期未填写，退款申请将撤销</view>
					</view>
				</view>
				<view style="height: 120upx;width: 100%;position: relative;" v-if="fundOrder.status==0||fundOrder.status==1" >
					<button @click="chexiao" class="default-opbtn" style="color: #EC6104;border:2upx solid #EC6104;border-radius: 6upx;position: absolute;right: 30upx;bottom:0">撤销申请</button>
				</view>
			</view>
			<!-- 填写基础的物流信息 --> 
			<!-- <view class="uni-list-cell-db">
				<picker @change="carbindPickerChange" :value="deliverIndex" :range="passarr">
					 <view class="uni-input">{{passarr[deliverIndex]}}</view>
				</picker>
			</view> -->
			<view style="padding:30upx;margin-top: 20upx;background-color: #fff;font-size: 28upx;color: #333;"  v-if="fundOrder.status==1&&fundOrder.type==1">
				<view>填写寄出物流信息</view>
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 20upx;border-top: 2upx solid #eee;margin-top: 16upx;">
					<view>
						<view class="input-defult">
							<view class="uni-list-cell-db">
								<picker @change="carbindPickerChange" :value="deliverIndex" :range="passarr">
									 <view class="uni-input">{{passarr[deliverIndex]}}</view>
								</picker>
							</view>
						</view>
						<!-- <input type="text" placeholder="请填写物流公司" v-model="deliveryCompany" class="input-defult"/> -->
						<input type="text" placeholder="请填写物流单号" v-model="deliveryNumber"  class="input-defult"/>
						<text style="display: none;">{{totalinput}}</text>
					</view>
					<button class="default-opbtn" :style="{background:(submitnumber?'#EC6104':'#666')}" @click="submitDelivery()" >提交</button>
				</view>
			</view>
			<!-- 物流详情 -->
			<view style="padding:10upx;margin-top: 20upx;background-color: #fff;font-size: 28upx;color: #333;" v-if="fundOrder.status=='2'&&fundOrder.type==1">
				<view>物流详情</view>
				<view style="align-items: center;padding: 20upx;border-top: 2upx solid #eee;margin-top: 16upx;font-size: 24upx;color: #666;">
					<view>承运公司：{{fundspecialMsg.new_aftersale_data.express_name}}</view>
					<view>快递单号：{{fundspecialMsg.new_aftersale_data.express_number}}</view>
				</view>
				<view class="total-wrap">
				  <view v-for="(item, index) in tracesData" :key="index" >
				    <trackNode :is-first="index===tracesData.length-1" :is-newest="index===0" :node-data="item"></trackNode>
				  </view>
				</view>
			</view>
			<view style="padding:30upx;margin-top: 20upx;background-color: #fff;font-size: 28upx;color: #333;">
				<view>退款信息</view>
				<view style="display: flex;align-items: center;padding: 20upx;border-top: 2upx solid #eee;margin-top: 16upx;">
					<image class="goods-img" :src="fundOrder.order_data.items.images" style="width: 146upx;height: 146upx;"></image>
					<view style="display: flex;flex-direction: column;flex:1;margin-left: 20upx;">
						<view class="goods-info">
							{{fundOrder.order_data.items.title}}
						</view>
						<view style="color: #EC6104;font-size: 28upx;margin-top: 30upx;">￥{{fundOrder.order_data.items.price}}</view>
					</view>
				</view>
				<view style="padding: 0 20upx ;border-top: 2upx solid #eee;line-height:2;font-size: 26upx;color: #999;">
					<view>退款原因：{{fundOrder.reason}}</view>
					<view>退款金额：￥{{fundOrder.price}}</view>
					<view>申请件数：{{fundOrder.number}}</view>
					<view>申请时间：{{fundOrder.apply_time_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import trackNode from '../../components/delivery/trackNode.vue'
	import * as util from '../../common/util.js'
	export default {
		data() {
			return {
				userToken:'',
				// 传过来的订单信息
				fundOrder:{},
				total:'',
				deliverState:'',//物流状态
				deliveryCompany:'',//物流公司
				deliveryNumber:'',//物流编号
				// 快递xinxi
				passObj:[],
				passarr:[],
				deliverIndex:0,
				
				submitnumber:false,
				fundspecialMsg:{},
				// 收货人地址信息
				fundAddress:{},
				tracesData:[]
			}
		},
		async onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			// that.loadData()
			that.fundOrder = JSON.parse(options.order)
			console.log(that.fundOrder)
			that.loadData()
			that.deliveryGo()
			if(that.fundOrder.status==2&&that.fundOrder.type==1){
				let delivery = await that.orderdelivery(1,that.fundOrder.express_number)
				that.tracesData = delivery.data
				that.deliverState =delivery.state
			}
		},
		components:{
			trackNode
		},
		watch:{
			total(newVal,oldVal){
			  if(Number(newVal) === 1){
				this.submitnumber = true
			  }else{
				this.submitnumber = false
			  }
			}
		},
		computed:{
			totalinput:function(){
				this.total=Number(Boolean(this.deliveryNumber))
			}
		},
		methods: {
			togglePopup(type) {
				this.type = type;
			},
			carbindPickerChange:function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.deliverIndex = e.target.value
			},
			// 物流接口信息
			deliveryGo(){
				let that = this
				postAjax('Orderaftersale/ExpressList',{token:that.userToken},function(data){
					console.log(data)
					if(data.code==0){
						that.passObj = data.data
						for(let i=0;i<that.passObj.length;i++){
							that.passarr.push(that.passObj[i].name)
						}
					}else{
						that.deliveryGo()
					}
					
					// console.log(that.passarr)
				})
			},
			//提交物流单号
			async submitDelivery(){
				let that = this
				
				if(that.deliveryNumber==''){
					uni.showToast({
					  title:'请填写物流单号',
					  icon:'none'
					})
					return
				}
				let postData = {
					token:that.userToken,
					id:that.fundOrder.id,
					express_name:that.passarr[that.deliverIndex],
					express_number:that.deliveryNumber,
					express_id:that.passObj[that.deliverIndex].id
				}
				postAjax('Orderaftersale/Delivery',postData,function(data){
					console.log(data)
					if(data.code == 0){
						uni.showToast({
						  title:'提交成功',
						  icon:'none'
						})
						that.fundOrder.status ==2
					}else{
						uni.showToast({
						  title:'提交失败，请稍后重试',
						  icon:'none'
						})
					}
				})
			},
			// 获取物流
			// 异步处理物流信息
			orderdelivery(orderid,deliveryid){
				return new Promise((resolve, reject) => {
					let that = this
					postAjax('order/logistics',{
						token:that.userToken,
						express_id:orderid,
						express_number:deliveryid,
					},function(data){
						console.log(data)
						if(data.code==0){
							resolve(data.data)
						}else{
							resolve('')
						}
					})
				})
			},
			
			// 物流状态的判断
			stateTxt(state){
				let statext = ''
				// 快递单当前状态，包括0在途，1揽收，2疑难，3签收，4退签，5派件，6退回，7转单，10待清关，11清关中，12已清关，13清关异常，14收件人拒签等13个状态
				if(state==0){
					statext = '运输中'
				}else if(state==1){
					statext = '已揽收'
				}else if(state==2){
					statext = '疑难'
				}else if(state==3){
					statext = '已签收'
				}else if(state==4){
					statext = '已退签'
				}else if(state==5){
					statext = '正在派件'
				}else if(state==7){
					statext = '转单'
				}else if(state==10){
					statext = '待清关'
				}else if(state==11){
					statext = '清关中'
				}else if(state==14){
					statext = '已清关'
				}else if(state==14){
					statext = '清关异常'
				}else if(state==14){
					statext = '收件人拒签'
				}
				return statext
			},
			// c撤销退货
			chexiao(){
				let that = this
				console.log(that.fundOrder,that.fundOrder.id)
				postAjax('Orderaftersale/Cancel',{
					token:that.userToken,
					id:that.fundOrder.id
				},function(data){
					if(data.code==0){
						uni.showToast({
						  title:'撤销成功',
						  icon:'none'
						})
						setTimeout(function(){
							uni.navigateTo({
								url:'index'
							})
						},300)
					}else{
						uni.showToast({
						  title:'网络连接错误，请稍后重试',
						  icon:'none'
						})
					}
				})
				
			},
			// 获取详情
			loadData(){
				let that = this
				let postdata = {
					token:that.userToken,
					oid:that.fundOrder.order_id,
					did:that.fundOrder.order_data.items.id
				}
				// 获取的订单数据
				postAjax('Orderaftersale/Aftersale',postdata,function(data){
					if(data.code==0){
						that.fundspecialMsg = data.data
						that.fundAddress = data.data.return_wl
					}else{
						that.loadData()
					}
					
					
				})
			}
		}
	}
</script>

<style>
	.fund-1{width: 74upx;height: 86upx;}
	.fund-2{width: 72upx;height: 78upx;}
	.fund-3{width: 70upx;height: 70upx;}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.input-defult{width: 320upx;padding: 16upx 20upx;border:2upx solid #999;font-size: 26upx;margin-top: 20upx;}
	.tips{position: relative;padding-left: 24upx;}
	.circle{display: block;width: 14upx;height: 14upx;background-color: #999;border-radius: 50%;}
	.content {
		height: 100vh;
		background-color: #F9F9F9;
	}
	.total-wrap {
	  width: 100vw;
	  height: auto;
	  box-sizing: border-box;
	  padding: 0;
	}
	.list-scroll-content{
		height: 100%;
	}
	.goods-box-single{
		display: flex;justify-content: space-between;
	}
	.colortxt{position: absolute;width: 100%;bottom:0;left:0;text-align: right;}
	.default-opbtn{width:180upx;height: 60upx;line-height:54upx;text-align: center;font-size:30upx ;display: inline-block;background:none;color: #fff;}
	.unstate{background-color: #999;}
	.instate{background-color:#EC6104;}
	.tuibtn{height: 60upx;line-height:54upx;text-align: left;font-size:28upx ;background: none;display: inline-block;padding:0 16upx;}
	.subin{width: 156upx;}
	.default-opbtn::after,.tuibtn::after{border: none;}
	.goods-totalmsg{padding:18upx 32upx 26upx 32upx;display: flex;justify-content: space-between;color: #666;font-size: 26upx;}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.order-item{
		display: flex;
		flex-direction: column;
		margin: 20upx;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 20upx;
		font-size: 28upx;
		color: #333;
		border-radius: 30upx;
	}
	.pageHeader {
		position: fixed;top:0;left:0;z-index:999;
		width: 100%;height: 128upx;background-color: #1D84E8;
		line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;
		/* height:64px;
		background-color: #1D84E8;
		line-height: 64px;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top:20px; */
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx
	}

	.regoodbox {
		padding: 170upx 0upx 22upx;
		/* padding: 22upx 30upx; */
	}


</style>
